<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>bootstrap简单使用</title>
		<meta http-equiv="x-ua-compatible" content="IE=Edge, chrome=1" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=yes">
		<link href="../../plugin/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
		<style>
			body{
				padding-top: 50px;
				overflow: hidden;
			}
			pre{
				overflow: auto;
			}
			h1,h3{
				padding:10px;
				margin-top:20px;
				margin-bottom: 20px;
			}
			h1.title{
				position: relative;
				border-bottom: 4px solid gray;
			}
			h3.sub-title {
				border-bottom: 1px solid gray;
			}
			.outer-div{
				height: calc(100vh - 50px);
				overflow: auto;
			}
			.row{
				margin-left: 5px;
				margin-right: 5px;
				background-color:#ddd;
			}
			.row>div {
				margin-top:10px;
				margin-bottom:10px;
				line-height: 50px;
				color: #ffffff;
				font-size: 18px;
				text-align:center;
			}
			div[class*="col-"]{
				padding-left: 5px;
				padding-right: 5px;
			}
			.row>div>.row>div{
				margin-top:0;
				margin-bottom:0;
			}
			.row>div>span{
				display: block;
				width: 100%;
				height:100%;
				background-color: #5cb85c;
			}
			.form-demo{
				padding:15px;
				border:1px solid #ddd;
			}
			
		</style>
		<!--[if lt IE 9]>
	         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	    <![endif]-->
		<script src="../../plugin/jquery/jquery.min.js"></script>
		<script src="../../plugin/bootstrap/js/bootstrap.min.js"></script>
	</head>

	<body>
		<nav class="navbar navbar-inverse navbar-fixed-top navbar-scroll" role="navigation">
		    <div class="container-fluid">
			    <div class="navbar-header">
			        <button type="button" class="navbar-toggle" data-toggle="collapse"
			                data-target="#example-navbar-collapse">
			            <span class="sr-only">切换导航</span>
			            <span class="icon-bar"></span>
			            <span class="icon-bar"></span>
			            <span class="icon-bar"></span>
			        </button>
			        <a class="navbar-brand" href="#">bootstrap常用组件</a>
			    </div>
			    <div class="collapse navbar-collapse" id="example-navbar-collapse">
			        <ul class="nav navbar-nav">
			            <li><a href="#yinyong">引用</a></li>
			            <li><a href="#shange">栅格</a></li>
			            <li><a href="#table">表格</a></li>
			            <li><a href="#form">表单</a></li>
			            <li><a href="#panel">面板</a></li>
			            <li><a href="#modal">模态框</a></li>
			            <li><a href="#globalStyle">全局样式</a></li>
			            <li class="dropdown">
			                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
			                                                            相关网站
			                    <b class="caret"></b>
			                </a>
			                <ul class="dropdown-menu">
			                	<li><a target="_blank" href="http://www.bootcss.com/">bootstrap官网</a></li>
			                    <li><a target="_blank" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">菜鸟教程</a></li>
			                    <li class="divider"></li>
			                    <li><a target="_blank" href="http://blog.doyoe.com/">css探索之旅</a></li>
			                    <li><a target="_blank" href="http://css.doyoe.com/">css手册</a></li>
			                </ul>
			            </li>
			        </ul>
			    </div>
		    </div>
		</nav>
		
        <div class="outer-div" data-spy="scroll" data-target=".navbar-scroll" data-offset="50">
		<div class="container"><!---fluid-->
		<h1 id="yinyong" class="title">引用</h1>
		<pre>
	    &lt;head&gt;
	        &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"/&gt;
		&lt;meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1,user-scalable=no"&gt;
		&lt;link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"&gt;
		&lt;!--[if lt IE 9]&gt;
	            &lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;
	            &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"&gt;&lt;/script&gt;
	        &lt;![endif]--&gt;
		&lt;script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
		&lt;script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
	    &lt;head&gt;
        </pre>
		<h1 id="shange" class="title">一、栅格系统</h1>
			<div class="table-responsive">
				<table class="table table-hover table-bordered table-striped">
					<thead>
						<tr>
							<th></th>
							<th>超小设备（<768px）</th>
							<th>小型设备平板电脑（>=768px）</th>
							<th>中型设备台式电脑（>=992px）</th>
							<th>大型设备台式电脑（>=1200px）</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>class前缀</td>
							<td>.col-xs-</td>
							<td>.col-sm-</td>
							<td>.col-md-</td>
							<td>.col-lg-</td>
						</tr>
						<tr>
							<td>列数和</td>
							<td>12</td>
							<td>12</td>
							<td>12</td>
							<td>12</td>
						</tr>
						<tr>
							<td>间隙宽度</td>
							<td>15px</td>
							<td>15px</td>
							<td>15px</td>
							<td>15px</td>
						</tr>
					</tbody>
				</table>
			</div>
		<pre>
			&lt;div class="container"&gt;
			  &lt;div class="row"&gt;
			    &lt;div class="col-md-3"&gt;&lt;/div&gt;
			    &lt;div class="col-md-3"&gt;&lt;/div&gt;
			    &lt;div class="col-md-2"&gt;&lt;/div&gt;
			    &lt;div class="col-md-4"&gt;&lt;/div&gt;
			  &lt;/div&gt;
			&lt;/div&gt;</pre>
			<div class="row ">
				<div class="col-xs-1"><span>1</span></div>
				<div class="col-xs-1"><span>1</span></div>
				<div class="col-xs-1"><span>1</span></div>
				<div class="col-xs-1"><span>1</span></div>
				<div class="col-xs-1"><span>1</span></div>
				<div class="col-xs-1"><span>1</span></div>
				<div class="col-xs-1"><span>1</span></div>
				<div class="col-xs-1"><span>1</span></div>
				<div class="col-xs-1"><span>1</span></div>
				<div class="col-xs-1"><span>1</span></div>
				<div class="col-xs-1"><span>1</span></div>
				<div class="col-xs-1"><span>1</span></div>
			</div>
			<div class="row ">
				<div class="col-xs-2"><span>2</span></div>
				<div class="col-xs-4"><span>4</span></div>
				<div class="col-xs-6"><span>6</span></div>
			</div>
			<div class="row ">
				<div class="col-xs-4"><span>4</span></div>
				<div class="col-xs-4"><span>4</span></div>
				<div class="col-xs-4"><span>4</span></div>
			</div>

			<div class="row ">
				<div class="col-xs-6"><span>6</span></div>
				<div class="col-xs-6"><span>6</span></div>
			</div>
			<div class="row ">
				<div class="col-xs-12"><span>12</span></div>
			</div>
		<h3 class="sub-title">嵌套--栅格中嵌套栅格</h3>
			<div class="row ">
				<div class="col-xs-8">
					<div class="row">
						<div class="col-xs-4"><span>内层栅格</span></div>
						<div class="col-xs-4"><span>内层栅格</span></div>
						<div class="col-xs-4"><span>内层栅格</span></div>
					</div>
				</div>
				<div class="col-xs-4"><span>外层栅格</span></div>
			</div>
		<h3 class="sub-title">列重置</h3>
			<div class="row ">
				<div class="col-md-4 col-sm-8 col-xs-6"><span>col-md-4&nbsp;col-sm-8&nbsp;col-xs-6</span></div>
				<div class="col-md-8 col-sm-4 col-xs-6"><span>col-md-8&nbsp;col-sm-4&nbsp;col-xs-6</span></div>
			</div>
		<h3 class="sub-title">列偏移</h3>
			<div class="row ">
				<div class="col-xs-8 col-xs-offset-2"><span>col-xs-8&nbsp;<strong class="text-info">col-xs-offset-2</strong></span></div>
			</div>
		<h3 class="sub-title">列排序</h3>
			<div class="row ">
				<div class="col-xs-4 col-xs-push-8"><span>col-xs-8&nbsp;<strong class="text-info">col-xs-push-8</strong></span></div>
				<div class="col-xs-8 col-xs-pull-4"><span>col-xs-2&nbsp;<strong class="text-info">col-xs-pull-4</strong></span></div>
			</div>
		<h3 class="sub-title">适用范围</h3>
			<div class="row ">
				<div class="col-xs-4"><span>col-xs-4</span></div>
				<div class="col-xs-8"><span>col-xs-8</span></div>
			</div>
			<div class="row ">
				<div class="col-sm-4"><span>col-sm-4</span></div>
				<div class="col-sm-8"><span>col-sm-8</span></div>
			</div>
			<div class="row ">
				<div class="col-md-4"><span>col-md-4</span></div>
				<div class="col-md-8"><span>col-md-8</span></div>
			</div>
			<h1 id="table" class="title">二、表格</h1>
			<div class="table-responsive">
				<table class="table table-bordered table-hover table-striped">
					<caption>可用于table的类</caption>
					<thead>
						<tr>
							<th>类</th>
							<th>描述</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>.table</td>
							<td>为任意 &lt;table&gt;添加基本样式 (只有横向分隔线)</td>
						</tr>
						<tr>
							<td>.table-striped</td>
							<td>在 &lt;tbody&gt;内添加斑马线形式的条纹 ( IE8 不支持)</td>
						</tr>
						<tr>
							<td>.table-bordered</td>
							<td>为所有表格的单元格添加边框</td>
						</tr>
						<tr>
							<td>.table-hover</td>
							<td>在&lt;tbody&gt;内的任一行启用鼠标悬停状态</td>
						</tr>
						<tr>
							<td>.table-condensed</td>
							<td>让表格更加紧凑</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="table-responsive">
				<table class="table table-bordered table-hover table-striped">
					<caption>可用于tr,th,td的类</caption>
					<thead>
						<tr>
							<th>类</th>
							<th>描述</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>.active</td>
							<td>将悬停的颜色应用在行或者单元格上</td>
						</tr>
						<tr>
							<td>.success</td>
							<td>表示成功的操作</td>
						</tr>
						<tr>
							<td>.info</td>
							<td>表示信息变化的操作</td>
						</tr>
						<tr>
							<td>.warning</td>
							<td>表示一个警告的操作</td>
						</tr>
						<tr>
							<td>.danger</td>
							<td>表示一个危险的操作</td>
						</tr>
					</tbody>
				</table>
			</div>	
			<h1 id="form" class="title">三、表单</h1>
			<h3 class="sub-title">垂直表单（默认）</h3>
			<form class="form-demo" role="form">
			  <div class="form-group">
			    <label for="name">名称</label>
			    <input type="text" class="form-control" id="name" placeholder="请输入名称">
			  </div>
			  <div class="form-group">
			    <label for="inputfile">文件输入</label>
			    <input type="file" id="inputfile">
			    <p class="help-block">这里是块级帮助文本的实例。</p>
			  </div>
			  <div class="checkbox">
			    <label>
			      <input type="checkbox">请打勾
			    </label>
			  </div>
			  <button type="button" class="btn btn-default">提交</button>
			</form>
			<h3 class="sub-title">内联表单</h3>
			<form class="form-inline form-demo" role="form">
			  <div class="form-group">
			    <label class="sr-only" for="name">名称</label>
			    <input type="text" class="form-control" id="name" placeholder="请输入名称">
			  </div>
			  <div class="form-group">
			    <label class="sr-only" for="inputfile">文件输入</label>
			    <input type="file" id="inputfile">
			  </div>
			  <div class="checkbox">
			    <label>
			      <input type="checkbox">请打勾
			    </label>
			  </div>
			  <button type="submit" class="btn btn-default">提交</button>
			</form>
			<h3 class="sub-title">水平表单</h3>
			<form class="form-horizontal form-demo" role="form">
			  <div class="form-group">
			    <label for="firstname" class="col-sm-2 control-label">名字</label>
			    <div class="col-sm-10">
			      <input type="text" class="form-control" id="firstname" placeholder="请输入名字">
			    </div>
			  </div>
			  <div class="form-group">
			    <label for="lastname" class="col-sm-2 control-label">姓</label>
			    <div class="col-sm-10">
			      <input type="text" class="form-control" id="lastname" placeholder="请输入姓">
			    </div>
			  </div>
			  <div class="form-group">
			    <div class="col-sm-offset-2 col-sm-10">
			      <div class="checkbox">
			        <label>
			          <input type="checkbox">请记住我
			        </label>
			      </div>
			    </div>
			  </div>
			  <div class="form-group">
			    <div class="col-sm-offset-2 col-sm-10">
			      <button type="submit" class="btn btn-default">登录</button>
			    </div>
			  </div>
			</form>
			<h3 class="sub-title">常用组件、类</h3>
			<form class="form-horizontal form-demo">
				<div class="form-group">
					<label class="control-label col-md-4" for="name">默认的复选框和单选按钮的实例</label>
					<div class="col-md-8">
						<div class="checkbox">
						    <label><input type="checkbox" value="">选项 1</label>
						</div>
						<div class="checkbox">
						    <label><input type="checkbox" value="">选项 2</label>
						</div>
						<div class="radio">
						    <label>
						        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 选项 1
						    </label>
						</div>
						<div class="radio">
						    <label>
						        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">选项 2 - 选择它将会取消选择选项 1
						    </label>
						</div>
					</div>
				</div>	
				<div class="form-group">
					<label class="control-label col-md-4" for="name">内联的复选框和单选按钮的实例</label>
					<div class="col-md-8">
						<div>
						    <label class="checkbox-inline">
						        <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
						    </label>
						    <label class="checkbox-inline">
						        <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
						    </label>
						    <label class="checkbox-inline">
						        <input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3
						    </label>
						    <label class="radio-inline">
						        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 选项 1
						    </label>
						    <label class="radio-inline">
						        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 选项 2
						    </label>
						</div>
					</div>
				</div>
				<div class="form-group">
				    <label class="col-md-4 control-label">静态文本</label>
				    <div class="col-md-8">
				      <p class="form-control-static">email@example.com</p>
				    </div>
				</div>
				 <div class="form-group">
				    <label class="col-md-4 control-label">聚焦</label>
				    <div class="col-md-8">
				      <input class="form-control" id="focusedInput" type="text" value="该输入框获得焦点...">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="inputPassword" class="col-md-4 control-label">禁用</label>
				    <div class="col-md-8">
				      <input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled>
				    </div>
				  </div>
				  <fieldset disabled>
				    <div class="form-group">
				      <label for="disabledTextInput" class="col-md-4 control-label">禁用输入</label>
				      <div class="col-md-8">
				        <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
				      </div>
				    </div>
				    <div class="form-group">
				      <label for="disabledSelect" class="col-md-4 control-label">禁用选择菜单</label>
				      <div class="col-md-8">
				        <select id="disabledSelect" class="form-control">
				          <option>禁止选择</option>
				        </select>
				      </div>
				    </div>
				  </fieldset>
				  <div class="form-group has-success">
				    <label class="col-md-4 control-label" for="inputSuccess">输入成功</label>
				    <div class="col-md-8">
				      <input type="text" class="form-control" id="inputSuccess">
				    </div>
				  </div>
				  <div class="form-group has-warning">
				    <label class="col-md-4 control-label" for="inputWarning">输入警告</label>
				    <div class="col-md-8">
				      <input type="text" class="form-control" id="inputWarning">
				    </div>
				  </div>
				  <div class="form-group has-error">
				    <label class="col-md-4 control-label" for="inputError">输入错误</label>
				    <div class="col-md-8">
				      <input type="text" class="form-control" id="inputError">
				    </div>
				  </div>
				  <div style="margin-bottom: 15px;">
				    <input class="form-control input-lg" type="text" placeholder=".input-lg">
				  </div>
				  <div style="margin-bottom: 15px;">
				    <input class="form-control" type="text" placeholder="默认大小">
				  </div>
				  <div style="margin-bottom: 15px;">
				    <input class="form-control input-sm" type="text" placeholder=".input-sm">
				  </div>
				  <div class="row" style="background-color: #fff;">
				    <div class="col-lg-2" style="height: auto;">
				      <input type="text" class="form-control" placeholder=".col-lg-2">
				    </div>
				    <div class="col-lg-3" style="height: auto;">
				      <input type="text" class="form-control" placeholder=".col-lg-3">
				    </div>
				    <div class="col-lg-4" style="height: auto;">
				      <input type="text" class="form-control" placeholder=".col-lg-4">
				    </div>
				  </div>
			</form>	
			<h1 id="panel" class="title">四、面板</h1>
			<div class="panel panel-default">
			    <div class="panel-heading">
			        <h3 class="panel-title">面板标题</h3>
			    </div>
			    <div class="panel-body">
			        面板内容
			    </div>
			</div>
			<div class="panel panel-default">
			    <div class="panel-heading">面板标题</div>
			    <div class="panel-body">
			        <p>这是一个基本的面板内容。这是一个基本的面板内容。
			            这是一个基本的面板内容。这是一个基本的面板内容。
			            这是一个基本的面板内容。这是一个基本的面板内容。
			            这是一个基本的面板内容。这是一个基本的面板内容。
			        </p>
			    </div>
			    <ul class="list-group">
			        <li class="list-group-item">企业信息</li>
			        <li class="list-group-item">成长培育</li>
			        <li class="list-group-item">经济运行</li>
			        <li class="list-group-item">运行监控</li>
			        <li class="list-group-item">填报中心</li>
			    </ul>
			</div>
			<div class="panel panel-default">
			    <div class="panel-heading">
			        <h3 class="panel-title">面板标题</h3>
			    </div>
			    <table class="table table-hover table-striped table-bordered">
			        <th>单位名称</th><th>市值</th>
			        <tr><td>腾讯</td><td>5000亿</td></tr>
			        <tr><td>阿里巴巴</td><td>4000亿</td></tr>
			    </table>
			</div>
			<div class="panel panel-primary">
			    <div class="panel-heading">
			        <h3 class="panel-title">面板标题</h3>
			    </div>
			    <div class="panel-body">
			        面板内容
			    </div>
			</div>
			<div class="panel panel-success">
			    <div class="panel-heading">
			        <h3 class="panel-title">面板标题</h3>
			    </div>
			    <div class="panel-body">
			       面板内容
			    </div>
			</div>
			<div class="panel panel-info">
			    <div class="panel-heading">
			        <h3 class="panel-title">面板标题</h3>
			    </div>
			    <div class="panel-body">
			        面板内容
			    </div>
			</div>
			<div class="panel panel-warning">
			    <div class="panel-heading">
			        <h3 class="panel-title">面板标题</h3>
			    </div>
			    <div class="panel-body">
			       面板内容
			    </div>
			</div>
			<div class="panel panel-danger">
			    <div class="panel-heading">
			        <h3 class="panel-title">面板标题</h3>
			    </div>
			    <div class="panel-body">
			       面板内容
			    </div>
			</div>
			<div class="panel-group" id="accordion">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" 
							   data-target="#collapseOne">
								天津中汽工业国际贸易有限公司
						</h4>
					</div>
					<div id="collapseOne" class="panel-collapse collapse in">
						<div class="panel-body">
							天津中汽工业国际贸易有限公司
						</div>
					</div>
				</div>
				<div class="panel panel-default">
					<div class="panel-heading">
						<h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" 
							   data-target="#collapseTwo">
								天津中汽工业国际贸易有限公司
						</h4>
					</div>
					<div id="collapseTwo" class="panel-collapse collapse">
						<div class="panel-body">
							天津中汽工业国际贸易有限公司
						</div>
					</div>
				</div>
				<div class="panel panel-default">
					<div class="panel-heading">
						<h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" 
							   data-target="#collapseThree">
								天津中汽工业国际贸易有限公司
						</h4>
					</div>
					<div id="collapseThree" class="panel-collapse collapse">
						<div class="panel-body">
							天津中汽工业国际贸易有限公司
						</div>
					</div>
				</div>
			</div>
			<h1 id="modal" class="title">四、模态框</h1>
			<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">显示模态框</button>
			<!-- 模态框（Modal） -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			    <div class="modal-dialog">
			        <div class="modal-content">
			            <div class="modal-header">
			                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			                <h4 class="modal-title" id="myModalLabel">标题</h4>
			            </div>
			            <div class="modal-body">文本内容</div>
			            <div class="modal-footer">
			            	<button type="button" class="btn btn-primary">提交更改</button>
			                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			            </div>
			        </div><!-- /.modal-content -->
			    </div><!-- /.modal -->
			</div>
			<div class="table-responsive">
				<table class="table table-bordered table-hover table-striped">
					<caption>常用方法</caption>
					<thead>
						<tr>
							<th>方法</th>
							<th>描述</th>
							<th>实例</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>modal('toggle')</td>
							<td>手动切换模态框。</td>
							<td>$('#modal_Id').modal('toggle')</td>
						</tr>
						<tr>
							<td>modal('show')</td>
							<td>手动打开模态框。</td>
							<td>$('#modal_Id').modal('show')</td>
						</tr>
						<tr>
							<td>modal('hide')</td>
							<td>手动隐藏模态框。</td>
							<td>$('#modal_Id').modal('hide')</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="table-responsive">
				<table class="table table-bordered table-hover table-striped">
					<caption>常用事件</caption>
					<thead>
						<tr>
							<th>事件</th>
							<th>描述</th>
							<th>实例</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>show.bs.modal</td>
							<td>在调用 show 方法后触发。</td>
							<td>$('#modal_Id').on('show.bs.modal', function () {// 执行一些动作...})</td>
						</tr>
						<tr>
							<td>shown.bs.modal</td>
							<td>当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。</td>
							<td>$('#modal_Id').on('shown.bs.modal', function () {// 执行一些动作...})</td>
						</tr>
						<tr>
							<td>hide.bs.modal</td>
							<td>当调用 hide 实例方法时触发。</td>
							<td>$('#modal_Id').on('hide.bs.modal', function () {// 执行一些动作...})</td>
						</tr>
						<tr>
							<td>hidden.bs.modal</td>
							<td>当模态框完全对用户隐藏时触发。</td>
							<td>$('#modal_Id').on('hidden.bs.modal', function () {// 执行一些动作...})</td>
						</tr>
					</tbody>
				</table>
			</div>	
			<h1 id="globalStyle" class="title">五、全局样式</h1>
			<h3 class="sub-title">文本类</h3>
			<div class="table-responsive">
				<table class="table table-bordered table-hover">
					<thead>
						<tr>
							<th>类</th>
							<th>描述</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>.text-left</td>
							<td class="text-left">"text-left" 类的文本样式</td>
						</tr>
						<tr>
							<td>.text-center</td>
							<td class="text-center">"text-center" 类的文本样式</td>
						</tr>
						<tr>
							<td>.text-right</td>
							<td class="text-right">"text-right" 类的文本样式</td>
						</tr>
						<tr>
							<td>.text-muted</td>
							<td class="text-muted">"text-muted" 类的文本样式</td>
						</tr>
						<tr>
							<td>.text-primary</td>
							<td class="text-primary">"text-primary" 类的文本样式</td>
						</tr>
						<tr>
							<td>.text-success</td>
							<td class="text-success">"text-success" 类的文本样式</td>
						</tr>
						<tr>
							<td>.text-info</td>
							<td class="text-info">"text-info" 类的文本样式</td>
						</tr>
						<tr>
							<td>.text-warning</td>
							<td class="text-warning">"text-warning" 类的文本样式</td>
						</tr>
						<tr>
							<td>.text-danger</td>
							<td class="text-danger">"text-danger" 类的文本样式</td>
						</tr>
					</tbody>
				</table>
			</div>	
			<h3 class="sub-title">背景类</h3>
			<div class="table-responsive">
				<table class="table table-bordered table-hover">
					<thead>
						<tr>
							<th>类</th>
							<th>描述</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>.bg-primary</td>
							<td class="bg-primary">"bg-primary" 类的背景样式</td>
						</tr>
						<tr>
							<td>.bg-success</td>
							<td class="bg-success">"bg-success" 类的背景样式</td>
						</tr>
						<tr>
							<td>.bg-info</td>
							<td class="bg-info">"bg-info" 类的背景样式</td>
						</tr>
						<tr>
							<td>.bg-warning</td>
							<td class="bg-warning">"bg-warning" 类的背景样式</td>
						</tr>
						<tr>
							<td>.bg-danger</td>
							<td class="bg-danger">"bg-danger" 类的背景样式</td>
						</tr>
					</tbody>
				</table>
			</div>	
			<h3 class="sub-title">响应类</h3>
			<div class="table-responsive">
				<table class="table table-bordered table-hover">
					<thead>
						<tr>
							<th>类</th>
							<th>超小屏幕手机 (<768px)</th>
							<th>小屏幕平板 (≥768px)</th>
							<th>中等屏幕桌面 (≥992px)</th>
							<th>大屏幕桌面 (≥1200px)</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>.visible-xs-*</td>
							<td>可见</td>
							<td>隐藏</td>
							<td>隐藏</td>
							<td>隐藏</td>
						</tr>
						<tr>
							<td>.visible-sm-*</td>
							<td>隐藏</td>
							<td>可见</td>
							<td>隐藏</td>
							<td>隐藏</td>
						</tr>
						<tr>
							<td>.visible-md-*</td>
							<td>隐藏</td>
							<td>隐藏</td>
							<td>可见</td>
							<td>隐藏</td>
						</tr>
						<tr>
							<td>.visible-lg-*</td>
							<td>隐藏</td>
							<td>隐藏</td>
							<td>隐藏</td>
							<td>可见</td>
						</tr>
						<tr>
							<td>.hidden-xs</td>
							<td>隐藏</td>
							<td>可见</td>
							<td>可见</td>
							<td>可见</td>
						</tr>
						<tr>
							<td>.hidden-sm</td>
							<td>可见</td>
							<td>隐藏</td>
							<td>可见</td>
							<td>可见</td>
						</tr>
						<tr>
							<td>.hidden-md</td>
							<td>可见</td>
							<td>可见</td>
							<td>隐藏</td>
							<td>可见</td>
						</tr>
						<tr>
							<td>.hidden-lg</td>
							<td>可见</td>
							<td>可见</td>
							<td>可见</td>
							<td>隐藏</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="table-responsive">
				<table class="table table-bordered table-hover">
					<thead>
						<tr>
							<th>类</th>
							<th>CSS display</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>.visible-*-block</td>
							<td>display: block;</td>
						</tr>
						<tr>
							<td>.visible-*-inline</td>
							<td>display: inline;</td>
						</tr>
						<tr>
							<td>.visible-*-inline-block</td>
							<td>display: inline-block;</td>
						</tr>
					</tbody>	
				</table>
			</div>	
			<h3 class="sub-title">其他</h3>
			<div class="table-responsive">
				<table class="table table-bordered table-hover">
					<thead>
						<tr>
							<th>类</th>
							<th>描述</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>.pull-left</td>
							<td><div class="pull-left">"pull-left" 元素浮动到左边</div></td>
						</tr>
						<tr>
							<td>.pull-right</td>
							<td><div class="pull-right">"pull-right" 元素浮动到右边</div></td>
						</tr>
						<tr>
							<td>.clearfix</td>
							<td class="clearfix"><div class="center-block">"clearfix" 清除浮动</td>
						<tr>
							<td>.center-block</td>
							<td><div class="center-block">"center-block" 设置元素为 display:block 并居中显示</div></td>
						</tr>
						</tr>
						<tr>
							<td>.show</td>
							<td><div class="show">"show" 强制元素显示</td>
						</tr>
						<tr>
							<td>.hide</td>
							<td><div class="">"hide" 强制元素隐藏</td>
						</tr>
					</tbody>
				</table>
			</div>	
		</div>	
        </div>
	</body>
</html>